<template>
  <el-row style="height: 100%">
    <el-col :span="4" style="height: 100%;border-right: 1px solid #eee">
      <CommonTree label-name="组织机构" :tree-props="treeProps" :data="treeData" @treeChange="treeChange"></CommonTree>
    </el-col>
    <el-col :span="20">
      <CommonBtn  label-name="用户信息列表" :buttons="buttons" @onButtonClick="onButtonClick">
      </CommonBtn>
      <CommonList ref="list"  :buttons="buttons"
                  :columns="columns" :listUrl="listUrl" @tableSelect="tableSelect" :conditions="conditions"></CommonList>
    </el-col>

    <search-pop-up :out-btn="button"
                   :props="columns" @close="close"
                   :out-conditions="conditions"
                   @conditionChange="conditionChange"></search-pop-up>
    <CommonExport :out-btn="button" :props="exportColumns"
                  @close="close" :export-url="$api.API_USERINFOEXPORT" :conditions="conditions"></CommonExport>
    <EnsurePopUp :out-btn="button" @close="close" @refresh="conditionChange" :original-data="row"
                 :delete-url="$api.API_USER_DELETE"
                 :enable-url="$api.API_USER_ENABLE"
                 :disable-url="$api.API_USER_DISABLE"></EnsurePopUp>

    <el-dialog :title="'系统角色信息-'+(button?(button.event=='add()'?'添加':'编辑'):'')" :visible.sync="show" width="35%">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="submit" status-icon :label-width="'80px'" ref="form">
            <el-form-item :label="item.name" :key="index" :prop="item.prop"  v-for="(item,index) of addItems" :rules="item.required?{ required: true, message: '不能为空', trigger: 'blur' }:null">
              <el-input  v-if="item.type=='text' || item.type=='textarea'" autocomplete="off" v-model="submit[item.prop]" :type="item.type"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="所属部门" name="second">
          <el-tree :data="treeData" :props="treeProps"  :expand-on-click-node="false" show-checkbox check-strictly ref="otree"
                   highlight-current default-expand-all node-key="organizationId" :default-checked-keys="oChecked">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span><i class="el-icon-tickets"></i>{{ node.label }}</span>
                </span>
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="用户组" name="third">
          <el-tree :data="groupTreeData" :props="{ label: 'userGroupName'}"  :expand-on-click-node="false" show-checkbox check-strictly ref="gtree"
                   highlight-current default-expand-all node-key="userGroupId" :default-checked-keys="gChecked"></el-tree>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>


  </el-row>
</template>

<script>
    import CommonBtn from "../../common/CommonBtn";
    import CommonTree from "../../common/CommonTree";
    import CommonList from "../../common/CommonList";
    import SearchPopUp from "../../common/SearchPopUp";
    import EnsurePopUp from "../../common/EnsurePopUp";
    import CommonExport from "../../common/CommonExport";
    let Base64 = require('js-base64').Base64
    export default {
        data(){
            return{
                buttons:[
                    this.$config.BTNS.ADD,
                    this.$config.BTNS.EDIT,
                    this.$config.BTNS.SEARCH,
                    this.$config.BTNS.DELETE,
                    this.$config.BTNS.ENABLE,
                    this.$config.BTNS.FORBIDEN,
                    this.$config.BTNS.EXPORT
                ],
                treeData:[],
                isAdministrator: false,
                treeProps: {
                    children: 'children',
                    label: 'organizationName'
                },
                button:null,
                exportColumns:[
                  {
                      prop:'userName',
                      label:'用户姓名',
                      search:true,
                      type:'text'
                  },
                  {
                      prop:'userAccount',
                      label:'登录账户',
                      search:true,
                      type:'text'
                  },
                  {
                      prop:'email',
                      label:'邮箱'
                  },
                  {
                      prop:'deleteMark',
                      label:'状态'
                  },
                  {
                      prop:'userRemark',
                      label:'备注描述'
                  },
                  {
                      prop:'sortCode',
                      label:'角色'
                  },
                  {
                      prop:'sortCode',
                      label:'创建时间'
                  },
                  {
                      prop:'sortCode',
                      label:'最后修改时间'
                  },
                  {
                      prop:'sortCode',
                      label:'创建人'
                  },
                  {
                      prop:'sortCode',
                      label:'最后修改人'
                  },
                ],
                columns:[
                    {
                        prop:'userName',
                        label:'用户姓名',
                        search:true,
                        type:'text'
                    },
                    {
                        prop:'userAccount',
                        label:'登录账户',
                        search:true,
                        type:'text'
                    },
                    {
                        prop:'deleteMark',
                        label:'状态',
                        customSet(value) {
                            switch (value) {
                                case 1:
                                    return "正常"
                                case 2:
                                    return "停用"
                            }
                            return ""
                        },
                    },
                    {
                        prop:'sortCode',
                        label:'备注'
                    }
                ],
                listUrl:this.$api.API_USER_LIST,
                conditions:[],
                row:{},
                conditions: [],
                show:false,
                activeName:'first',
                submit:{},
                addItems:[
                    {name:'职工工号',prop:'userCode',type:'text',required:true},
                    {name:'职工姓名',prop:'userName',type:'text',required:true},
                    {name:'登录账号',prop:'userAccount',type:'text',required:true},
                    {name:'登录密码',prop:'pwd',type:'text',required:true},
                    {name:'电子邮件',prop:'email',type:'text'},
                    {name:'备注描述',prop:'userRemark',type:'textarea'},
                ],
                groupTreeData:[],
                oChecked:[],
                gChecked:[]
            }
        },
        methods:{
            onButtonClick(item) {
                if (item.event == 'edit()') {
                    if (!this.row || JSON.stringify(this.row) == '{}') {
                        this.$message.error("请选择一行数据")
                        return
                    }
                }
                if (item.event == 'add()') {
                    this.row = null
                    this.show = true
                    this.submit = {}
                    if (this.oChecked.length>0 ){
                        this.oChecked = []
                        this.$refs.otree.setCheckedKeys([]);
                    }
                    if (this.gChecked.length>0) {
                        this.gChecked = []
                        this.$refs.gtree.setCheckedKeys([]);
                    }
                }

                if (item.event == 'edit()') {
                    this.show = true
                    this.userInfo()
                }

                this.button = item
            },
            initData() {
              this.$http.get(this.$api.API_USER_INIT).then(resp=>{
                  this.treeData = resp.organizationList
                  this.groupTreeData = resp.groupList
              },msg=>{})
            },
            userInfo() {
              this.$http.post(this.$api.API_USER_INFO,{userId:this.row.userId}).then(resp=>{
                  this.gChecked = resp.groupList.map((item)=>{return item.userGroupId})
                  this.oChecked = resp.organizeList.map((item)=>{return item.organizationId})
                  this.$refs.otree.setCheckedKeys( this.oChecked);
                  this.$refs.gtree.setCheckedKeys( this.gChecked);
                  this.submit.userPwd = resp.userInfo.userPwd
                  this.submit.email = resp.userInfo.email
                  this.submit.userRemark = resp.userInfo.userRemark
                  this.$set(this.submit,'pwd','************')
                  console.log('this.submit:',this.submit)
              })
            },
            tableSelect(row) {
                this.row = row
                this.submit = row
                console.log('111:',this.submit)
            },
            close(item) {
                this.button = item
            },
            conditionChange() {
                this.$refs.list.search()
            },
            treeChange(item) {
                this.conditions = []
                this.conditions.push({checked:true,prop:'organizationId',value:item.organizationId})
                this.$nextTick(()=>{
                    this.$refs.list.search()
                })
            },
            closeDialog() {
                this.show = false
            },
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (!valid) {
                        this.$message.error('缺少字段！')
                        return false;
                    }
                });
                let os = this.$refs.otree.getCheckedKeys()
                let gs = this.$refs.gtree.getCheckedKeys()
                if (!os || os.length<1) {
                    this.$message.error('请选择用户所属部门！')
                    return
                }
                this.submit.organizeList = os.join(',')
                this.submit.groupList = gs.join(',')
                let url = this.row?this.$api.API_USER_UPDATE:this.$api.API_USER_ADD
                if (this.row && this.submit.pwd == '************') {
                        this.submit.userPwd = Base64.encode(this.submit.userPwd)
                } else {
                    this.submit.userPwd = Base64.encode(this.submit.pwd)
                }
                this.$http.post(url,this.submit).then(resp=>{
                    this.$message.success('保存成功！')
                    this.closeDialog()
                    this.$refs.list.search()
                },msg=>{})
            },
            isadminitrator(){
            this.$http.post(this.$api.API_QUERYMDM_ISADMINITRATOR)
            .then(resp=>{
              // if(resp>0){
              //   this.isAdministrator=true
              //   this.buttons=[
              //       this.$config.BTNS.ADD,
              //       this.$config.BTNS.EDIT,
              //       this.$config.BTNS.SEARCH,
              //       this.$config.BTNS.DELETE,
              //       this.$config.BTNS.ENABLE,
              //       this.$config.BTNS.FORBIDEN,
              //       this.$config.BTNS.EXPORT
              //   ]   
              // }
            })
          }
        },
        created() {
            this.initData()
            this.isadminitrator()
        },
        components:{CommonTree, CommonBtn, CommonList, SearchPopUp, EnsurePopUp, CommonExport}
    }
</script>

<style lang="less" scoped>
  /deep/.el-dialog__header{
    padding: 10px;
    background: #d51900;
  }
  /deep/.el-dialog__headerbtn{
    top:10px;
    right:10px;
    i{
      color: white !important;
    }
  }

  /deep/.el-form-item__label,/deep/.el-form-item__content{
    line-height: unset;
    font-size: 9pt;
    color: black;
  }

  /deep/.el-dialog__title{
    color: white;
    font-size: 14px;
    font-weight: bold;
  }

  /deep/.el-dialog__body{
    padding: 10px 20px;
  }

  /deep/.el-input__inner{
    height: 24px;
    line-height: 24px;
    border-radius: 0;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  /deep/.el-input__icon{
    line-height: 25px;
  }

  /deep/.el-form-item__error{
    padding: 0px;
  }

</style>

